<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>添加/编辑楼层硬盘录像机</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form label-width="140px" ref="editForm">
          <el-form-item label="楼层位置：">
            <el-select v-model="dataOption.map_id" placeholder="楼层位置">
              <el-option
                  v-for="item in floorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备品牌：">
            <el-select v-model="dataOption.brand_id" placeholder="设备类型">
              <el-option
                  v-for="item in videoList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="IP地址：">
            <el-input v-model="dataOption.ip" auto-complete="off" placeholder="IP地址"></el-input>
          </el-form-item>
          <el-form-item label="端口号：">
            <el-input v-model="dataOption.port" auto-complete="off" placeholder="IP地址"></el-input>
          </el-form-item>
          <el-form-item label="名称：">
            <el-input v-model="dataOption.name" auto-complete="off" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="账号：">
            <el-input v-model="dataOption.account" auto-complete="off" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input v-model="dataOption.password" auto-complete="off" placeholder="密码"></el-input>
          </el-form-item>

          <el-form-item label="备注：">
            <el-input v-model="dataOption.remark" auto-complete="off" placeholder="备注"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button @click="submitBook" size="small" type="primary">确定并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {recorderAdd, recorderEdit, recorderDetail} from "@/api/admin/cameraVideo"

export default {
  props: ['visible', 'pointId'], // commoent 学生点评 collection 学生采集
  components: {},
  data() {
    return {
      cornerVisible: false,
      dialogVisible: false,
      floorList: [],
      // 1海康，2大华，3天地伟业
      videoList: [{
        value: 1,
        label: '海康'
      }, {
        value: 2,
        label: '大华'
      }, {
        value: 3,
        label: '天地伟业'
      }],
      pointVisible: false,
      pointType: '',
      pointName: '',
      pointMap: '',// 坐标
      deviceIP: '',
      deviceName: '',
      corner: '',
      dynamicTagsArray: [],
      dataOption: {
        map_id: '',// 	字符串 	必填 	1 	- 	地图id
        name: '',//  	字符串 	必填 	1 	- 	名称
        brand_id: '',//  	字符串 	必填 	1 	- 	品牌1海康威视
        account: '',//  	字符串 	必填 	1 	- 	账号
        password: '',// 	字符串 	必填 	1 	- 	密码
        ip: '',// 	字符串 	必填 	1 	- 	ip地址
        port: '', // 端口号
        remark: ''// 	字符串 	必填 	1 	- 	备注
      }
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      // 获取楼层
      this.getFloor()
      if (this.visible) {
        if (this.pointId) {
          this.getDetail()
        }
      } else {
        for (let i in this.dataOption) {
          this.dataOption[i] = '';
        }
      }
    }
  },
  created() {

  },
  methods: {
    submitBook() {
      // 判断新增 编辑
      if (!this.dataOption.map_id) {
        this.$message.error('选择楼层')
        return
      }
      if (!this.dataOption.brand_id) {
        this.$message.error('选择品牌')
        return
      }
      if (!this.dataOption.name) {
        this.$message.error('填写名称')
        return
      }
      if (!this.dataOption.account) {
        this.$message.error('填写账号')
        return
      }
      if (!this.dataOption.password) {
        this.$message.error('填写密码')
        return
      }
      if (!this.dataOption.ip) {
        this.$message.error('填写设备ip')
        return
      }

      let data_ = this.getJson(this.dataOption)
      if (this.pointId) {
        data_.id = this.pointId;
        recorderEdit(data_).then(res => {
          if (!res.code) {
            this.$message.success(res.msg)
            this.$emit('InitFn')
            this.closePOpup()
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        recorderAdd(data_).then(res => {
          if (!res.code) {
            this.$message.success(res.msg)
            this.$emit('InitFn')
            this.closePOpup()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    async getFloor() {
      let data = await this.$fetch(this.api.floor.index, {});
      if (!data.code) {
        this.floorList = data.list.data;
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    getDetail() {
      recorderDetail({id: this.pointId}).then(res => {
        console.log('res:', res)
        for (let i in this.dataOption) {
          this.dataOption[i] = res.vo[i] || '';
        }
      })
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 50%;
  height: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

</style>


